<template>
    <div id="leftmenu">
        <div class="one" v-for="(item, index) in MenuList" :key="index">
            <div class="onebox" @click="showTwo(index)">
                <div class="iconbox">
                    <img :src="item.pic" v-if="item.pic" alt="">
                </div>
                <div class="onetitle" >
                    {{ item.title }}
                </div>
                <div class="endicon" >
                    <i class=" icon el-icon-plus" ></i>
                </div>
               
            </div>
            <div class="bottom"></div>
            <div class="two" >
                <div class="twobox" v-for="(child, inx) in item.children" :key="inx">
                    <div class="twocontent">
                        <div class="twoicon">
                            <img :src="child.pic" v-if="child.pic" alt="">
                        </div>
                        <div class="twotitle" @click="goPage(child)">
                            {{ child.title }}
                        </div>
                        <!-- <div class="endicon" >
                            <i :class="{'el-icon-plus': !item.isColl, 'el-icon-minus': item.isColl}" ></i>
                        </div> -->
                    
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                MenuHeight: "",
                MenuList:[]
            }
        },
        computed: {
            token() {
                return localStorage.token;
            }
        },
        mounted() {
            this.getMenuHeight()
            this.getAllMenu()
            this.onSizeChange()
        },
        methods: {
           //获取高度
           getMenuHeight() {
               let dom = document.getElementById("leftmenu")
                let data = document.documentElement.clientHeight
                dom.style.height = `${data - 105}px`
                
           },
           // 获取所有菜单
            async getAllMenu() {
                let res =await this.$axios.post("/admin/role/menu_module_show", { token: this.token })
                // console.log(res);
                if(res.data.code == 200) {
                    this.MenuList = res.data.data
                    this.MenuList.forEach( el => {
                        el.isColl = false
                    })
                }
                
            },
            // 展开二级菜单
            showTwo(index) {
                let arr = $(".two").eq(index).css("display")
                $(".two").eq(index).slideToggle()
                // console.log($(".two").eq(index).find(".icon"));
                
               if (arr == "none") {
                //    console.log(1);
                   
                   $(".one").eq(index).find(".icon").removeClass("el-icon-plus").addClass("el-icon-minus")
               } else {
                //    console.log(2);
                   
                    $(".one").eq(index).find(".icon").removeClass("el-icon-minus").addClass("el-icon-plus")
               }
               
            } ,
            // 打开二级页面
            goPage( item ) {
                this.$router.push(item.name)
            },
            // sizechange
            onSizeChange() {
                window.onresize = this.getMenuHeight()
            }
        } 
    }
</script>

<style lang="scss" scoped>
#leftmenu {
    background-color: #aaa;
    width: 200px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: scroll;
    &::-webkit-scrollbar {
        display: none;
    }
    i {
        color: #000;
    }
    .one {
        width: 100%;
        box-sizing: border-box;
        cursor: pointer;
        .onebox {
            display: flex;
            width: 100%;
            height: 50px;
           
            line-height: 50px;
            box-sizing: border-box;
            align-items: center;
            .iconbox {
                width: 20px;
                height: 20px;
                margin-left: 20px;
                background-color: #000;
                img {
                    width: 20px;
                    height: 20px;
                    display: block;
                }
            }
            .onetitle {
                margin-left: 10px;
                width: 100px;
            }
        }
        .bottom {
            width: 100%;
            height: 1px;
            background:radial-gradient(#666 20%,#aaa 60%);
        }
    }
    .two {
        width: 100%;
        box-sizing: border-box;
        display: none;
        padding-left: 30px;
        .twobox {
            width: 100%;
            box-sizing: border-box;
            .twocontent {
                width: 100%;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                height: 40px;
                line-height: 40px;
                .twoicon {
                    width: 20px;
                    height: 20px;
                    margin-left: 20px;
                    background-color: #000;
                    img {
                        width: 20px;
                        height: 20px;
                        display: block;
                    }
                }
                .twotitle {
                    margin-left: 10px;
                }
            }
        }
    }
}

</style>
<style >
.el-icon-arrow-down:before {
    color: #000 !important;
    
}

</style>